<template>
	<view>
		<!-- 顶部导航栏开始 -->
		<uni-nav-bar>
			<view><Tabs @changeIndex="tabTap" :tabBars="tabBars" :tabIndex="tabIndex"></Tabs></view>
			<view slot="left"><view class="icon iconfont icon-qian"></view></view>
			<view slot="right" @click="clickRight"><view class="rig_icon iconfont icon-bi"></view></view>
		</uni-nav-bar>
		<!-- 顶部导航栏结束 --> 
		<!-- 列表内容开始 -->
		<view class="guanzhu" v-if="tabIndex === tabBars[0].id">
			<scroll-view :style="{ height: swiperHight + 'px' }" @scrolltolower="pullUpLoad" scroll-y class="list">
				<view>
					<view class="guanzhu_wrap animated fadeInLeft" v-for="(item, index) in guanzhu.list" :key="index">
						<!-- 图文列表 -->
						<DynamicList :itemLis="item" :index="index"></DynamicList>
					</view>
					<!-- 上拉加载 -->
					<PullUpLoad :loadtext="guanzhu.loadtext"></PullUpLoad>
				</view>
			</scroll-view>
			<!-- 图文列表 -->
			<!-- <DynamicShare></DynamicShare> -->
		</view>
		<view class="huati" v-else>
			<view class="animated fadeInRight">
				<!-- 搜索框 -->
				<view class="searchInput"><input class="seach" type="text" placeholder-class="iconfont icon-sousuo-copy" placeholder="搜索内容" /></view>
				<!-- 轮播图banner -->
				<Swiper :swiperItems="swiperItems"></Swiper>
				<!-- 轮播图结束 -->

				<!-- 热门分类开始 -->
				<HotClassify :nav="nav"></HotClassify>

				<!-- 热门分类结束 -->

				<!-- 最新更新开始 -->
				<view class="update_name">最新更新</view>
				<UpdateNews :list="list"></UpdateNews>
				<!-- 最近更新结束 -->
			</view>
			<!-- 列表内容结束 -->
		</view>
	</view>
</template>

<script>
import DynamicList from '../../components/dynamic-list/dynamic-list';
import Tabs from '../../components/tabs/tabs';
import DynamicShare from '../../components/dynamic-share/dynamic-share';
import PullUpLoad from '../../components/pullUpLoad/pullUpLoad.vue';
import Swiper from '../../components/swiper/swiper';
import HotClassify from '@/components/Hot-Classify/Hot-Classify';
import UpdateNews from '@/components/Update-News/Update-News';
export default {
	components: {
		Tabs,
		DynamicList,
		DynamicShare,
		PullUpLoad,
		Swiper,
		HotClassify,
		UpdateNews
	},
	data() {
		return {
			swiperHight: 200,
			tabIndex: 0,
			tabBars: [
				{
					name: '关注',
					id: 0,
					isShow: true
				},
				{
					name: '话题',
					id: 1,
					isShow: false
				}
			],
			guanzhu: {
				loadtext: '上拉加载更多',
				list: [
					// 文字
					{
						userpic: '../../static/demo/userpic/12.jpg',
						username: '哈哈',
						sex: 0, //0 男 1 女
						age: 25,
						isguanzhu: false,
						title: '我是标题',
						titlepic: '../../static/demo/datapic/13.jpg',
						video: false,
						share: false,
						path: '深圳 龙岗',
						sharenum: 20,
						commentnum: 30,
						goodnum: 20
					},
					// 图文
					{
						userpic: '../../static/demo/userpic/12.jpg',
						username: '哈哈',
						sex: 0, //0 男 1 女
						age: 25,
						isguanzhu: false,
						title: '我是标题',
						titlepic: '../../static/demo/datapic/13.jpg',
						video: false,
						share: false,
						path: '深圳 龙岗',
						sharenum: 20,
						commentnum: 30,
						goodnum: 20
					},
					// 视频
					{
						userpic: '../../static/demo/userpic/12.jpg',
						username: '哈哈',
						sex: 0, //0 男 1 女
						age: 25,
						isguanzhu: false,
						title: '我是标题',
						titlepic: '../../static/demo/datapic/13.jpg',
						video: {
							looknum: '20w',
							long: '2:47'
						},
						share: false,
						path: '深圳 龙岗',
						sharenum: 20,
						commentnum: 30,
						goodnum: 20
					},
					// 分享
					{
						userpic: '../../static/demo/userpic/12.jpg',
						username: '哈哈',
						sex: 0, //0 男 1 女
						age: 25,
						isguanzhu: false,
						title: '我是标题',
						titlepic: '',
						video: false,
						share: {
							title: '我是分享的标题',
							titlepic: '../../static/demo/datapic/14.jpg'
						},
						path: '深圳 龙岗',
						sharenum: 20,
						commentnum: 30,
						goodnum: 20
					}
				]
			},
			swiperItems: [
				{
					bannerUrl: require('@/static/demo/banner1.jpg')
				},
				{
					bannerUrl: require('@/static/demo/banner2.jpg')
				},
				{
					bannerUrl: require('@/static/demo/banner3.jpg')
				}
			],
			nav: [{ name: '最新' }, { name: '游戏' }, { name: '打卡' }, { name: '情感' }, { name: '故事' }, { name: '喜爱' }],
			list: [
				{
					titlepic: '../../static/demo/topicpic/13.jpeg',
					title: '话题名称',
					desc: '我是话题描述',
					totalnum: 50,
					todaynum: 10
				},
				{
					titlepic: '../../static/demo/topicpic/13.jpeg',
					title: '话题名称',
					desc: '我是话题描述',
					totalnum: 50,
					todaynum: 10
				},
				{
					titlepic: '../../static/demo/topicpic/13.jpeg',
					title: '话题名称',
					desc: '我是话题描述',
					totalnum: 50,
					todaynum: 10
				},
				{
					titlepic: '../../static/demo/topicpic/13.jpeg',
					title: '话题名称',
					desc: '我是话题描述',
					totalnum: 50,
					todaynum: 10
				},
				{
					titlepic: '../../static/demo/topicpic/13.jpeg',
					title: '话题名称',
					desc: '我是话题描述',
					totalnum: 50,
					todaynum: 10
				},
				{
					titlepic: '../../static/demo/topicpic/13.jpeg',
					title: '话题名称',
					desc: '我是话题描述',
					totalnum: 50,
					todaynum: 10
				}
			]
		};
	},
	onLoad() {
		// 获取可使用窗体高度
		uni.getSystemInfo({
			success: res => {
				let hight = res.windowHeight - uni.upx2px(90);
				this.swiperHight = hight;
			}
		});
	},
	methods: {
		// 切换顶部tab点击颜色
		tabTap(index) {
			this.tabIndex = index;
		},
		// 跳转到发布页面
		clickRight() {
			uni.navigateTo({
				url: '../publish/publish'
			});
		},
		// 上拉加载更多
		pullUpLoad() {
			// 判断数据
			if (this.guanzhu.loadtext !== '上拉加载更多') {
				return;
			}
			// 修改状态
			this.guanzhu.loadtext = '加载中...';
			setTimeout(() => {
				let obj = {
					userpic: '../../static/demo/userpic/12.jpg',
					username: '哈哈',
					sex: 0, //0 男 1 女
					age: 25,
					isguanzhu: false,
					title: '我是标题',
					titlepic: '../../static/demo/datapic/13.jpg',
					video: false,
					share: false,
					path: '深圳 龙岗',
					sharenum: 20,
					commentnum: 30,
					goodnum: 20
				};

				this.guanzhu.list.push(obj);
				this.guanzhu.loadtext = '上拉加载更多';
			}, 1000);
			// this.news[index].loadtext = '没有加载的数据'
		}
	}
};
</script>

<style lang="less" scoped>
.icon {
	font-size: 50rpx;
	color: #e7c287;
}
.rig_icon {
	font-size: 40rpx;
	padding-left: 70rpx;
}
.update_name {
	padding: 10rpx;
}
.searchInput {
	margin: 15rpx;
	.seach {
		text-align: center;
		background-color: #f4f4f4;
		padding: 15rpx 0;
		border-radius: 15rpx;
	}
}
</style>
